 <template>
 	<view class="parkarea">
 		<!-- 园区 -->
 		<view class="information">
 			<!-- 搜索 -->
 			<view class="inf-top">
 				<text class="top-text">园区快讯</text>
 				<!-- 搜索 -->
 				<uni-icons type="search" size="24" color="#fff" class="top-icon" @click="onSearchGo()"></uni-icons>
 			</view>
 		</view>
 		<!--  快讯列表 -->
 		<scroll-view scroll-y class="inf-list" @scrolltolower="getOaNewsAllData">
 			<!-- item -->
 			<view class="parknews" v-for="(item, index) in parknewsList" :key="index" @click="SharedWorkers(item.src)">
 				<!-- 时间轴 -->
 				<text class="dot"></text>
 				<!-- <text class="jiantou"></text> -->
 				<!-- end时间轴 -->
 				<view class="parknews-left">
 					<!-- 标题 -->
					<view class=".parknews-leftt">
						<text class="parknews-left-title">{{ item.title }}</text>
					</view>
 					<!-- 发布时间 -->
 					<view class="parknews-left-time">{{ $getRelativeTimes(item.createTime) }}</view>
 				</view>
 				<view class="parknews-right">
 					<image :src="item.filePath" lazy-load="true" mode="scaleToFill" />
 				</view>
 			</view>
 			<view class="loading-text">
 				{{ finish ? "没有更多数据了~" : "正在加载..." }}
 			</view>
 		</scroll-view>
 	</view>
 </template>

 <script>
	import {
		getOaNewsAll
	} from "@/proxy/asset/admin.api.js";
 	export default {
 		onLoad() {
 			console.log("页面加载完成");
			this.$nextTick(() => {
			  	this.isLoading = false;
			  console.log("DOM 渲染完成");
			});
 			// setTimeout(function(){
 			// 	this.isLoading = false;
 			// }, 1000);
 		},
		async mounted() {
			// 同时加载数据
			await Promise.all([
			  this.getOaNewsAllData(),
			])
		},
 		data() {
 			return {
 				// 是否显示loading
 				isLoading: true,
				finish:false,
 				// 接受data数据
 				parknewsList: [],
				pageSize:7, // 新闻条数
				pageNum:1, // 第一页
 			};
 		},
 		methods: {
 			onSearchGo() {
 				uni.navigateTo({
 					url: "/pagesParkarea/parkarea/search",
 				});
 			},
 			// 点击园区快讯
 			// SharedWorkers(id) {
				// console.log("跳转园区快讯详情",id)
				// uni.navigateTo({
				// 	url: "/pagesParkarea/parkarea/details?id=" + id
				// });
 			// },
			SharedWorkers(src) {
				console.log("跳转园区快讯详情", src)
				uni.navigateTo({
					url: "/pagesParkarea/parkarea/details?url=" + src,
				});
			},
			// 获取新闻列表
			async getOaNewsAllData(){
				if (this.finish) {
					// 轻提示
					return this.$toast({
						title: '没有更多数据了~',
						icon: 'none',
					});
				}
				try {
					const result = await getOaNewsAll({
						params:{
							pageNum:this.pageNum,
							pageSize:this.pageSize
						}
					});
					
					if (result.code == 200) {
						if (result.rows.length !== 0) {
							this.pageNum++;
						} else {
							// 标记结束
							this.finish = true;
							// 轻提示
							return this.$toast({
								title: '没有更多数据了~',
								icon: 'none',
							});
						}
					   this.parknewsList.push(...result.rows);
					   console.log("获取新闻列表",result)
					} else {
					  this.$toast({
					    title: result.data.msg,
					  });
					}
				  } catch (err) {
					this.$toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					})
					console.log(err);
				  }
			},
 		}
 	}
 </script>
 <style lang="scss" scoped>
 	.parkarea {

 		// background: rgba(0,0,0,0.2);
 		// height: 100vh;
 		// width: 750rpx;
 		.information {
 			padding: 50rpx 30rpx 0;
 			position: relative;
 			background: #2698fb;
 			color: #ffffff;
 			background-image: url("https://limsapi.gzhbcss.com/static/index_header_1.jpg");
 			background-size: cover;
 			background-position: center;

 			.inf-top {
 				height: 250rpx;
 				display: flex;
 				align-content: center;
 				justify-content: space-between;

 				.top-text {
 					font-weight: bold;
 					font-size: 50rpx;
 				}

 				.top-icon {
 					width: 75rpx;
 					height: 75rpx;
 					background-color: rgba(0, 0, 0, 0.2);
 					text-align: center;
 					line-height: 75rpx;
 					border-radius: 50%;
 					font-size: 40rpx;
 				}
 			}
 		}

 		// 加载区
 		.inf-list {
 			background: #fff;
 			position: absolute;
 			overflow: hidden;
 			left: 0;
 			bottom: 0;
 			top: 200rpx;
 			border-radius: 50rpx 50rpx 0rpx 0rpx;

 			// background-image: linear-gradient(to right,#fdf1d8,#0081ff);
 			.loading-text {
 				text-align: center;
 				font-size: 28rpx;
 				color: #666;
 				padding: 20rpx 0 50rpx;
 			}

 			.parknews {
 				padding: 20rpx 30rpx;
 				margin: 0 15rpx;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
 				box-sizing: border-box;
 				position: relative;
 				border-left: 2rpx solid #ddd;
 				// border-radius: 10rpx;

 				// 时间轴
 				.dot {
 					display: block;
 					width: 15rpx;
 					height: 15rpx;
 					background-color: #fff;
 					border: 6rpx solid #2698fb;
 					border-radius: 50%;
 					position: absolute;
 					top: 50%;
 					/* margin-top: -7px; */
 					left: -13rpx;
 					transform: translateY(-50%);
 				}

 				// 箭头
 				// .jiantou{
 				// 	width: 0;
 				// 	height: 0;
 				// 	display: block;
 				// 	position: absolute;
 				// 	top: 50%;
 				// 	margin-top: -8rpx;
 				//   border-top:	8rpx solid transparent;
 				// 	border-bottom: 8rpx solid transparent;
 				// 	border-right: 16rpx solid #fff;
 				// 	left: 7rpx;
 				// }
 				.parknews-left {
 					flex: 1;

 					overflow: hidden;
 					/*显示文本行数*/
 					-webkit-box-orient: vertical;
 					.parknews-leftt{
 						overflow: hidden;
 						text-overflow: ellipsis;
 						display: -webkit-box;
 						-webkit-line-clamp: 2;
 						/*显示文本行数*/
 						-webkit-box-orient: vertical;
 						// height: 90rpx; /* 或者根据需要设置具体高度 */
 						.parknews-left-title {
 							white-space: normal;
 							font-size: 35rpx;
 							font-weight: bold;
 							display: block;
 							// height: 94rpx; /* 或者根据需要设置具体高度 */
							letter-spacing: 2rpx;
 						}
 					}

 					.parknews-left-time {
 						color: gray;
 						font-size: 25rpx;
 						margin-top: 25rpx;
 					}
 				}

 				.parknews-right {
 					height: 150rpx;

 					image {
 						width: 230rpx;
 						height: inherit;
 					}
 				}
 			}
 		}
 	}
 </style>